<template>
  <div v-if="store.total > 0" class="cart-container">
    <div class="shop">
      <van-icon name="shop-o" />
      <span class="shop-name">嗨购商城</span>
    </div>
    <van-swipe-cell v-for="item in store.cartList" :key="item.proid">
      <div class="goods-cell">
        <van-checkbox
          class="checkbox"
          v-model="item.state"
          @change="changeState($event, item.proid)"
        ></van-checkbox>
        <van-card :title="item.proname" :thumb="item.img" class="goods-card">
          <template #price>
            <span style="color: red; font-size: 15px"
              >￥{{ formatPrice(item.price) }}</span
            >
          </template>
          <template #num>
            <van-stepper
              v-model="item.number"
              theme="round"
              button-size="24"
              disable-input
              @change="changeNum($event, item.proid)"
            />
          </template>
        </van-card>
      </div>
      <template #right>
        <van-button
          square
          text="删除"
          type="danger"
          class="delete-button"
          @click="del(item.proid)"
        />
      </template>
    </van-swipe-cell>

    <van-submit-bar
      :price="store.totalAmount * 100"
      button-text="提交订单"
      @submit="onSubmit"
      :disabled="store.totalAmount === 0"
    >
      <van-checkbox v-model="checked">全选</van-checkbox>
    </van-submit-bar>
  </div>
  <div v-else>
    <van-empty
      image="https://img11.360buyimg.com/jdphoto/s180x180_jfs/t18163/292/540553659/74408/adeb7463/5a93c51cN3bb5e37b.png"
      description="购物车是空的，赶快去挑选好货~"
    />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useCartStore } from '@/stores/cart'
const store = useCartStore()

const formatPrice = price => {
  return price.toFixed(2)
}

// 更改了checkbox的选中状态
const changeState = (state, proid) => {
  store.updateGoodsState({ proid, state })
}

// 更改商品的数量
const changeNum = (number, proid) => {
  store.updateGoodsNumber({ proid, number })
}

// 删除
const del = proid => {
  store.deleteGoodsById(proid)
}

// 提交
const onSubmit = () => {
  console.log('---下单---')
}

// const checked = computed(() => store.isAllSelect)
const checked = computed({
  get () {
    return store.isAllSelect
  },
  set (state) {
    /**
     * 点击了下面的全选&反选之后，要变成的值
     */
    store.selectAllOrNot(state)
  }
})
</script>

<style lang="scss" scoped>
::v-deep .van-empty__image {
  padding-top: 200px;
  width: 80px;
  height: 80px;
}
.cart-container {
  padding-bottom: 100px;
  overflow: auto;
  height: calc(100vh - 100px);

  .shop {
    background-color: white;
    border-bottom: 1px solid #edeeed;
    padding: 5px 10px;
    .shop-name {
      margin-left: 5px;
      font-size: 14px;
      color: #3f3f3f;
    }
  }
  .goods-cell {
    display: flex;
    background-color: white;
    border-bottom: 1px solid #edeeed;
    height: 105px;
    align-items: center;
    .checkbox {
      width: 40px;
      height: 100%;
      line-height: 100%;
      justify-content: center;
    }

    .goods-card {
      flex: 1;
      margin: 0;
      background-color: white;
    }
  }

  .delete-button {
    height: 100%;
  }
  ::v-deep .van-submit-bar {
    background: hsla(0, 0%, 100%, 0.95);
    bottom: 50px;
  }
}
// 去除滚动条
.cart-container::-webkit-scrollbar {
  width: 0 !important;
}
</style>
